<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师信息管理</title>
    <link rel="stylesheet" href="../../static/css/all.min.css">
    <link rel="stylesheet" href="../../static/css/TeacherManage.css">
    <script src="../../static/js/jquery.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../static/js/TeacherManage.js" defer></script>

</head>
<body>
<div class="container">
    <header>
        <!-- 添加用户信息栏 -->
        <!--        <div class="user-info">-->
        <!--            <div class="user-avatar">-->
        <!--                <img src="https://xww123456.oss-cn-beijing.aliyuncs.com/test.jpg" alt="用户头像">-->
        <!--            </div>-->
        <!--            <div class="user-name">管理员</div>-->
        <!--            <div class="logout-btn" title="退出登录">-->
        <!--                <i class="fas fa-sign-out-alt"></i>-->
        <!--            </div>-->
        <!--        </div>-->



        <h1><i class="fas fa-user-graduate"></i> 教师信息管理</h1>
    </header>

    <main>
        <div class="card">
            <div class="toolbar">
                <div class="search-group">
                    <div class="search-box">
                        <label for="name-search">姓名</label>
                        <i class="fas fa-user"></i>
                        <input type="text" id="name-search" placeholder="输入姓名搜索">
                    </div>
                    <div class="search-box">
                        <label for="phone-search">手机号</label>
                        <i class="fas fa-phone"></i>
                        <input type="text" id="phone-search" placeholder="输入手机号搜索">
                    </div>
                    <div class="search-box">
                        <label for="workNumber-search">教工号</label>
                        <i class="fas fa-user-gear"></i>
                        <input type="text" id="workNumber-search" placeholder="输入教工号搜索">
                    </div>
                </div>
                <button id="search-btn" class="btn btn-primary pulse">
                    <i class="fas fa-search"></i> 搜索
                </button>
                <button id="add-btn" class="btn btn-success">
                    <i class="fas fa-plus"></i> 添加教师
                </button>
            </div>

            <div class="table-container">
                <table id="student-table">
                    <thead>
                    <tr>
                        <th width="5%">ID</th>
                        <th width="14%">姓名</th>
                        <th width="14%">密码</th>
                        <th width="14%">年龄</th>
                        <th width="14%">性别</th>
                        <th width="14%">教工号</th>
                        <th width="15%">手机号</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 数据将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>

            <!-- 分页控件 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示 <span id="start-row">1</span> - <span id="end-row">10</span> 条，共 <span id="total-rows">0</span> 条
                </div>
                <div class="pagination-controls">
                    <div class="pagination-btn first-page" title="第一页">
                        <i class="fas fa-angle-double-left"></i>
                    </div>
                    <div class="pagination-btn prev-page" title="上一页">
                        <i class="fas fa-angle-left"></i>
                    </div>
                    <!-- 页码按钮由JS生成 -->
                    <div class="pagination-btn next-page" title="下一页">
                        <i class="fas fa-angle-right"></i>
                    </div>
                    <div class="pagination-btn last-page" title="最后一页">
                        <i class="fas fa-angle-double-right"></i>
                    </div>
                    <div class="rows-per-page">
                        <span>每页显示：</span>
                        <select id="rows-per-page">
                            <option value="5">5</option>
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                </div>
            </div>


        </div>
    </main>

    <!-- 添加学生模态框 -->
    <div id="add-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-user-plus"></i> 添加新教师</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="student-name">姓名</label>
                    <input type="text" id="student-name" placeholder="请输入教师姓名">
                </div>
                <div class="form-group">
                    <label for="student-password">密码</label>
                    <input type="text" id="student-password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="student-age">年龄</label>
                    <input type="text" id="student-age" placeholder="请输入年龄">
                </div>
                <div class="form-group">
                    <label for="student-sex">性别</label>
                    <input type="text" id="student-sex" placeholder="请输入性别">
                </div>
                <div class="form-group">
                    <label for="student-workNumber">教工号</label>
                    <input type="text" id="student-workNumber" placeholder="请输入教工号">
                </div>
                <div class="form-group">
                    <label for="student-phone">手机号</label>
                    <input type="text" id="student-phone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancel-add" class="btn btn-outline">取消</button>
                <button id="save-add" class="btn btn-success">保存</button>
            </div>
        </div>
    </div>

    <!-- 编辑学生模态框 -->
    <div id="edit-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-user-edit"></i> 编辑教师信息</h3>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit-id">
                <div class="form-group">
                    <label for="edit-name">姓名</label>
                    <input type="text" id="edit-name" placeholder="请输入教师姓名">
                </div>
                <div class="form-group">
                    <label for="edit-password">密码</label>
                    <input type="text" id="edit-password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="edit-age">年龄</label>
                    <input type="text" id="edit-age" placeholder="请输入年龄">
                </div>
                <div class="form-group">
                    <label for="edit-sex">性别</label>
                    <input type="text" id="edit-sex" placeholder="请输入性别">
                </div>
                <div class="form-group">
                    <label for="edit-workNumber">教工号</label>
                    <input type="text" id="edit-workNumber" placeholder="请输入教工号">
                </div>
                <div class="form-group">
                    <label for="edit-phone">手机号</label>
                    <input type="text" id="edit-phone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancel-edit" class="btn btn-outline">取消</button>
                <button id="save-edit" class="btn btn-warning">保存修改</button>
            </div>
        </div>
    </div>


</div>


</body>
</html>